<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tree插件</title>
<link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../Content/css/mycss.css" />
</head>

<body>
<div class="container-fluid">
	<h3>树插件</h3>
    <div id="my_tree" class="my-tree-menu">
        <ul>
            <li>
              <a href="#">货物分类</a>
              <ul class="sub">
                <li>
                  <a href="#">零件</a>
                  <ul class="sub">
                     <li>
                       <a href="#">零件1</a>
                     </li>
                     <li>
                       <a href="#">零件1</a>
                     </li>
                     <li>
                       <a href="#">零件1</a>
                     </li>
                  </ul>
                </li>
                <li><a href="#">器械</a></li>
                <li><a href="#">器械</a></li>
                <li><a href="#">器械</a></li>
                
              </ul>
            </li>
        </ul>
    </div>
    <h3>HTML Code</h3>
    <div>
    	<pre>
        	<code>
            	&lt;!--创建一个容器--&gt;
                &lt;!--当你需要创建一个如上所示的树，那么对应的HTML结构必须以此为标准--&gt;
                &lt;!--红色标记部分必需设置，当HTML创建好后用于JS调用与JS代码红色部分想对应，蓝色部分为必需内容为树控件设置样式--&gt;
                <span>&lt;div <font color="red">id="tree-id"</font> <font color="#0000FF">class="my-tree-menu"</font>&gt;</span>
                    <span>&lt;ul&gt;</span>
                    	<span>&lt;!--创建根节点--&gt;</span>
                        <span>&lt;li&gt;</span>
                          <span>&lt;!--根节点标题--&gt;</span>
                          <span>&lt;a href="#"&gt;货物分类&lt;/a&gt;</span>
                          <span>&lt;!--创建子内容--&gt;</span>
                          <span>&lt;!--黄色标记部分是为当前节点的子节点设置样式，重此UL标签开始到结束都为当前节点的子节点-&gt;</span>
                          <span>&lt;ul <span style="background-color:#FF0">class="sub"</span>&gt;</span>
                            <span>&lt;!--子节点--&gt;</span>
                            <span>&lt;li&gt;</span>
                              <span>&lt;a href="#"&gt;零件&lt;/a&gt;</span>
                              <span>&lt;!--孙节点内容--&gt;</span>
                              <span>&lt;ul class="sub"&gt;</span>
                                 <span>&lt;!--孙节点--&gt;</span>
                                 <span>&lt;li&gt; &lt;a href="#"&gt;零件1&lt;/a&gt;&lt;/li&gt;</span>
                                 <span>&lt;li&gt;&lt;a href="#"&gt;零件1&lt;/a&gt;&lt;/li&gt;</span>
                                 <span>&lt;li&gt;&lt;a href="#"&gt;零件1&lt;/a&gt;&lt;/li&gt;</span>
                              <span>&lt;/ul&gt;</span>
                            <span>&lt;/li&gt;</span>
                            <span>&lt;!--子节点--&gt;</span>
                            <span>&lt;li&gt;&lt;a href="#"&gt;器械&lt;/a&gt;&lt;/li&gt;</span>
                            <span>&lt;!--子节点--&gt;</span>
                            <span>&lt;li&gt;&lt;a href="#"&gt;器械&lt;/a&gt;&lt;/li&gt;</span>
                            <span>&lt;!--子节点--&gt;</span>
                            <span>&lt;li&gt;&lt;a href="#"&gt;器械&lt;/a&gt;&lt;/li&gt;</span>
                            
                          <span>&lt;/ul&gt;</span>
                        <span>&lt;/li&gt;</span>
                    <span>&lt;/ul&gt;</span>
                <span>&lt;/div&gt;</span>
            </code>
        </pre>
    </div>
    <h3>JS Code</h3>
    <div>
    	<pre>
        	<code>
            	<span>
                    /*引入JS库*/
                    &lt;script src="jquery.min.js"&gt;&lt;/script&gt;
                    &lt;script src="jquery.myTree.js"&gt;&lt;/script&gt;
                    &lt;script&gt;
                        $(function(){
                            /*根据ID进行调用*/
                            $('<font color="red">#tree-id</font>').myTree({
                            	/*子节点样式*/
                                subClass:'sub'  
                            })
                        })
                    &lt;/script&gt;
                </span>
            </code>
        </pre>
    </div>
    <h3>简要说明</h3>
    <p>首先构建HTML结构，导入相关JS 库，直接调用就可以。</p>
</div>
<script src="../../Scripts/jquery.min.js"></script>
<script src="../../Scripts/jquery.myTree.js"></script>
<script>
	$(function(){
		$('#my_tree').myTree({
			subClass:'sub'  
		})
	})
</script>
</body>
</html>
